<template>
	<div class="addVideo">
		<el-dialog
			:title="`${type == 'add' ? '新增' : '编辑'}分组信息`"
			:visible.sync="dialogVisible"
			width="600px"
			:modal-append-to-body="false"
			:close-on-click-modal="false"
			custom-class="custom-dialog"
		>
			<el-form
				ref="forms"
				size="small"
				:model="forms"
				:rules="rules"
				label-width="140px"
				label-position="right"
			>
				<el-form-item label="分组名称：" prop="group_name">
					<el-input
						v-model="forms.group_name"
						placeholder="请输入分组名称"
						clearable
						maxlength="20"
						show-word-limit
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="报名开始时间" prop="apply_start_time">
					<el-date-picker
						v-model="forms.apply_start_time"
						type="datetime"
						placeholder="请选择"
						value-format="yyyy-MM-dd HH:mm:ss"
						style="width: 100%"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="报名截止时间" prop="apply_end_time">
					<el-date-picker
						v-model="forms.apply_end_time"
						type="datetime"
						placeholder="请选择"
						value-format="yyyy-MM-dd HH:mm:ss"
						style="width: 100%"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="赛事开始时间" prop="group_start_time">
					<el-date-picker
						v-model="forms.group_start_time"
						type="datetime"
						placeholder="请选择"
						value-format="yyyy-MM-dd HH:mm:ss"
						style="width: 100%"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="赛事结束时间" prop="group_end_time">
					<el-date-picker
						v-model="forms.group_end_time"
						type="datetime"
						placeholder="请选择"
						value-format="yyyy-MM-dd HH:mm:ss"
						style="width: 100%"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="支付金额：" prop="pay_money">
					<el-input
						v-model="forms.pay_money"
						placeholder="请输入支付金额"
						clearable
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="折扣金额：" prop="discount_money">
					<el-input
						v-model="forms.discount_money"
						placeholder="请输入折扣金额"
						clearable
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="最低年龄：" prop="min_age">
					<el-input
						v-model.number.trim="forms.min_age"
						placeholder="请输入最低年龄"
						clearable
						show-word-limit
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="最高年龄：" prop="max_age">
					<el-input
						v-model.number.trim="forms.max_age"
						placeholder="请输入最高年龄"
						clearable
						show-word-limit
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="摇号规则：" prop="compete_rule">
					<el-radio-group v-model="forms.compete_rule">
						<el-radio :label="1">无需摇号</el-radio>
						<el-radio :label="2">先付费后摇号</el-radio>
						<el-radio :label="3">先摇号后付费</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="报名人数：" prop="person_limit">
					<el-input
						v-model="forms.person_limit"
						placeholder="请输入报名人数"
						clearable
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="赛事距离(km)：" prop="group_distance">
					<el-input
						v-model="forms.group_distance"
						placeholder="请输入赛事距离"
						clearable
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="是否亲子跑：" prop="is_children">
					<el-radio-group v-model="forms.is_children">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="是否停止报名：" prop="is_stop_apply">
					<el-radio-group v-model="forms.is_stop_apply">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<!-- <el-form-item label="共享分组：" prop="share_id">
					<el-select v-model="forms.share_id" placeholder="请选择" style="width: 100%" clearable>
						<el-option
							v-for="item in groupOptions"
							:key="item.group_id"
							:label="item.group_name"
							:value="item.group_id"
						/>
					</el-select>
				</el-form-item> -->
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button style="margin-right: 5px" @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveVideos">保存</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import { mapGetters } from 'vuex'
	import { addRaceGroup, editRaceGroup } from '@/api/competition-manage.js'
	export default {
		name: 'add-daily',
		props: {
			groupOptions: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				dialogVisible: false,
				disabled: false,
				forms: {
					title: '',
					content: ''
				},
				rules: {
					group_name: [{ required: true, message: '请输入分组名称', trigger: 'change' }],
					apply_start_time: [{ required: true, message: '请选择报名开始时间', trigger: 'change' }],
					apply_end_time: [{ required: true, message: '请选择报名开始时间', trigger: 'change' }],
					group_start_time: [{ required: true, message: '请选择赛事开始时间', trigger: 'change' }],
					group_end_time: [{ required: true, message: '请选择赛事开始时间', trigger: 'change' }],
					compete_rule: [{ required: true, message: '请选择', trigger: 'change' }],
					group_distance: [
						{ required: true, message: '请输入赛事距离', trigger: 'change' },
						{ pattern: /^\d{1,2}(\.\d{1,4})?$/, message: '格式不正确', trigger: 'blur' }
					],
					pay_money: [
						{ required: true, message: '请输入支付金额', trigger: 'change' },
						{ pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确', trigger: 'blur' }
					],
					min_age: [
						{ required: true, message: '请输入最低年龄', trigger: 'blur' },
						{ pattern: /^[1-9]\d{0,1}?$/, message: '格式不正确', trigger: 'blur' }
					],
					max_age: [
						{ required: true, message: '请输入最高年龄', trigger: 'blur' },
						{ pattern: /^[1-9]\d{0,1}?$/, message: '格式不正确', trigger: 'blur' }
					],
					person_limit: [
						{ required: true, message: '请输入报名人数', trigger: 'change' },
						{ pattern: /^0|[1-9]\d*$/, message: '格式不正确', trigger: 'blur' }
					]
				},
				type: 'add',
				info: {}
			}
		},
		computed: {
			...mapGetters(['token', 'userInfo'])
		},
		methods: {
			async initData(type, info = {}) {
				console.log(info)
				this.type = type
				this.forms = {
					group_id: info.group_id || '',
					group_name: info.group_name || '',
					apply_start_time: info.apply_start_time || '',
					apply_end_time: info.apply_end_time || '',
					group_start_time: info.group_start_time || '',
					group_end_time: info.group_end_time || '',
					pay_money: info.pay_money || '',
					discount_money: info.discount_money || '',
					min_age: info.min_age || '',
					max_age: info.max_age || '',
					person_limit: info.person_limit || '',
					group_distance: info.group_distance || '',
					is_children: info.is_children || 0,
					is_stop_apply: info.is_stop_apply || 0,
					share_id: info.share_id || '',
					compete_rule: info.compete_rule || 2
				}
				this.dialogVisible = true
				this.$nextTick(() => {
					this.$refs.forms.clearValidate()
				})
			},
			async getDetailInfo(info_id) {
				const loading = this.$loading({
					lock: true,
					text: '数据加载中,请稍等~',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
				try {
					const res = await getInfo({ id: info_id })
					this.info = res.data
					loading.close()
				} catch (e) {
					loading.close()
					console.log(e)
				}
			},
			// 保存
			async saveVideos() {
				this.$refs.forms.validate(async valid => {
					if (valid) {
						console.log(this.forms)
						const loading = this.$setLoading({
							lock: true,
							text: '数据提交中~'
						})
						const func = this.forms.group_id ? editRaceGroup(this.forms) : addRaceGroup(this.forms)
						Promise.all([func])
							.then(result => {
								const [res] = result
								this.$message.success(`${this.type === 'add' ? '新增' : '修改'}分组成功！`)
								if (res.data.group_id) {
									this.forms.group_id = res.data.group_id
								}
								this.$emit('update', this.type, this.forms)
								this.dialogVisible = false
								loading.close()
							})
							.finally(() => loading.close())
					} else {
						this.$message.warning('请先完善信息！')
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.addVideo {
		::v-deep {
			.el-dialog .el-dialog__body {
				padding-bottom: 20px;
			}
		}
		.box-wrap {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
	}
</style>